<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            height: 3000px;
            background: linear-gradient(to bottom,gray 10%,pink 80%,red 90%);
        }

        .aTop {
            width: 100%;
            height: 60px;
            background-color: aqua;
            position: fixed;
            top: -60px;/* 隐藏顶部 */
            transition: all 1s ease-in;
            line-height: 60px;
            text-align: center;
        }

        .go {
            width: 80px;
            height: 80px;
            background-color: chartreuse;
            position: fixed;
            right: 30px;
            bottom: 30px;
            cursor: pointer;/* 鼠标放上去变成手指样式 */
            text-align: center;
            line-height: 80px;
            border-radius: 50%;
            font-size: 30px;
        }

    </style>
</head>

<body>
    <div id="aTop" class="aTop">顶部通栏</div>
    <div id="goTop" class="go">
        <p>↑</p>
    </div>
    <script>
        goTop.onclick = function () {
            //设置鼠标点击事件
            window.scrollTo(
                //鼠标点击后，滚动条滑到最顶部
                {
                    top: 0,
                    behavior: 'smooth',//写这个代码滚动条就不会瞬间移动，而是有个滑动的过程
                }
            )
        };
        window.onscroll = function () {
            //设置滚动条触发事件
            var scrollTop = document.documentElement.scrollTop || document.body.scroll;//定义一个变量处理卷去高度的两种情况
            if (scrollTop >= 300) {
                //当滚动条>=300时，goTop盒子出现，顶部盒子在页面最顶部
                goTop.style.display = "block";
                aTop.style.top = 0;
            } else {
                //当滚动条<300，goTop盒子消失，顶部盒子移动到距离顶部-60px，相当于隐藏掉
                goTop.style.display = "none";
                aTop.style.top = -60 + "px";
            };
        };

    </script>
</body>

</html>